'use strict';

var React = require('react');
var Router = require('react-router'); 
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Loader = require('react-loader');

var PanelRouterAction = require('../../actions/panelRouter');

var ChatsComponents = React.createClass({
      getInitialState:function(){
            var list =  [
                        {isVip:true,refundTime:'1天',closeTime:'2小时４分'},
                        {isVip:false,refundTime:'3天',closeTime:'2小时222分'},
                        {isVip:true,refundTime:'54天',closeTime:'2小时33分'},
                        {isVip:false,refundTime:'1天',closeTime:'4小时４分'},
                        {isVip:true,refundTime:'1天',closeTime:'88小时４分'}
                  ]
            return {list : list,loaded:false};
      },
      componentWillMount:function(){
            var self = this;
            setTimeout(function(){
                  self.replaceState({loaded:true,list:self.state.list});
            },2000);
      },
      handlerOpenReport:function(){
            var params = {
                  userId:'12333',
                  tabTitle:'我举报的问题',
                  inputTitle:'请选择举报类型'
            };
            PanelRouterAction.PANEL_ROUTER_REPORT(params);
      },
      handlerOpenRefuse:function(){
            var params = {
                  userId:'12333',
                  cartTitle:'我拒答的问题',
                  inputTitle:'请选择拒单的理由'
            };
            PanelRouterAction.PANEL_ROUTER_REFUSE(params);
      },
      handlerOpenCart:function(){
            var params = {
                  userId:'12333'
            };
            PanelRouterAction.PANEL_ROUTER_CART(params);
      },
      render: function() {
            var self = this;
            
            var el ={
                  detailUtil:'',
                  lastReply:''
            };
            switch(this.props.type){
                  case 'MyTabOne':
                        el.detailUtil=(
                              <ul className="do-detail-util">
                                    <li><a href="javascript:;" onClick={self.handlerOpenReport}>举报</a></li>
                                    <li>|</li>
                                    <li><a href="javascript:;" onClick={self.handlerOpenRefuse}>拒答</a></li>
                                    <li>
                                          <Link to="/Dialogue/1/123">
                                                <input type="button" className="do-btn do-btn-primary do-btn-md" value="回答" />
                                          </Link>
                                    </li>
                              </ul>
                              );
                        break;
                  case 'MyTabTwo':
                        el.detailUtil=(
                              <ul className="do-detail-util">
                                    <li>
                                          <Link to="/Dialogue/1/123">
                                                <input type="button" className="do-btn do-btn-primary do-btn-md" value="回答" />
                                          </Link>
                                    </li>
                              </ul>
                              );
                        el.lastReply=(
                              <p  className="do-last-reply"><span className="do-reply-bold">最近答复:</span>最近啥都没说啊最近啥都没说啊最近啥都没说啊最近啥都没说啊最近啥都没说啊最近啥都没说啊最近啥都没说啊最近啥都没说啊最近啥都没说啊</p>
                              );
                        break;
                  case 'MyTabThere':
                        el.detailUtil=(
                              <ul className="do-detail-util">
                                    <li>
                                          <Link to="/Dialogue/2/123">
                                                <input type="button" className="do-btn do-btn-primary do-btn-md" value="查看" />
                                          </Link>
                                    </li>
                              </ul>
                        );
                        break;
            }
          console.log(self.state,'~~~~~~~~~~~~~~~~');
         var list = self.state.list.map(function (list,i) {
                  return (
                                    <li className="do-chatlist-item"  key={i}>
                                          <ul className="do-pho-img">
                                                 <li >
                                                            <a href="javascript:;" onClick={self.handlerOpenCart}><img src="/images/test-user-icon.jpg" alt="用户头像" className="pho-img" /></a>
                                                            <span className={list.isVip?'do-pho-vip':''}>{list.isVip?'VIP':''}</span>
                                                </li>
                                          </ul>     
                                          <div className="do-user-info">
                                                <ul className="do-user-name">
                                                      <li ><a href="javascript:;" onClick={self.handlerOpenCart}>张三三</a></li>
                                                      <li>(这是什么)</li>
                                                      <li>33岁</li>
                                                      <li>辣妈</li>
                                                </ul>
                                                <ul className="do-msg-closeTime" >
                                                      <li>距问题关闭，还剩{list.closeTime}</li>
                                                </ul>

                                                <span className="do-user-msg">怀孕三个月，最近几天浑身没劲，身体就像灌了铅一样，而且容易出汗，胃口也不好，吃不下饭，请问我这到底是什么原因</span>
                                                <span className="do-user-msg-img">
                                                      <img src="/images/text-user-bchao.jpg" alt="B 超图"  />
                                                      <img src="/images/text-user-bchao.jpg" alt="B 超图"  />
                                                      <img src="/images/text-user-bchao.jpg" alt="B 超图"  />
                                                </span>
                                          </div>
                                          <div className="do-list-tool">
                                                      <ul className="do-info-detail">
                                                            <li >2012-11-11 19:33</li>
                                                            <li>儿科</li>
                                                            <li>孕6周2天</li>
                                                      </ul>
                                                            {el.detailUtil}
                                                            {el.lastReply}
                                          </div>
                                          <div className="do-border-warp">
                                                <span className="do-border"></span>
                                          </div>
                                    </li>
                        );
            });
             
            
            var opts = {
              lines: 13, 
              length: 0, 
              width: 6, 
              radius: 11, 
              corners: 1, 
              rotate: 0, 
              direction: 1, 
              color: '#000',
              speed: 2, 
              trail: 52, 
              hwaccel: false, 
              className: 'spinner',
              zIndex: 2e9, 
              top: '50%',
              left: '50%'
            };

            return (
            /* jshint ignore:start */
                  <Loader loaded={this.state.loaded} options={opts} className="spinner">
                        <ul className="do-chatlist">
                              {list}
                        </ul>
                  </Loader>
            /* jshint ignore:end */
      );
      }
});

module.exports =ChatsComponents;